<template>
  <div id="wrapper">
    <img id="logo" src="~@/assets/logo.png" alt="electron-vue">
    <main>
      <div class="left-side">
        <span class="title">
          Welcome to your new project!
        </span>
        <system-information></system-information>
        <update-version :centerDialogVisible="centerDialogVisible"></update-version>
      </div>

      <div class="right-side">
        <div class="doc">
          <div class="title">Getting Started</div>
          <p>
            electron-vue comes packed with detailed documentation that covers everything from
            internal configurations, using the project structure, building your application,
            and so much more.
          </p>
          <button @click="open('https://simulatedgreg.gitbooks.io/electron-vue/content/')">Read the Docs</button><br><br>
        </div>
        <div>
          <el-progress class="progress"
                     :percentage="progress"
                     :text-inside="true"
                     :stroke-width="20">
        </el-progress>
        </div>
        <div class="doc">
          <div class="title alt">Other Documentation</div>
          <button class="alt" @click="open('https://electron.atom.io/docs/')">Electron</button>
          <button class="alt" @click="open('https://vuejs.org/v2/guide/')">Vue.js</button>
          <button class="alt" @click="notice">通知</button>
          <button class="alt" @click="toNotifyCenter">消息中心</button>
          <button class="alt" @click="dbInsert">插入</button>
          <button class="alt" @click="dbFind">查询</button>
          <button class="alt" @click="doExtraOpen">打开文件</button>
          <button class="alt" @click="formto">传输中心</button>
          <button class="alt" @click="checkUploadChunks">上传</button>
          <input type="file" id="file" style="display: none">
           <el-button class="hidden" @click="openOrCloseSuspension">{{ active?'开启':'隐藏'}} 悬浮窗</el-button>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
  import SystemInformation from './LandingPage/SystemInformation'
  import UpdateVersion from '@/components/update'
  import { ipcRenderer, shell } from 'electron'
  // import { getFileMD5 } from '@/utils/upload'
  require('@/utils/common')
  export default {
    name: 'landing-page',
    data () {
      return {
        centerDialogVisible: true,
        progress: 100,
        active: false
      }
    },
    components: { SystemInformation, UpdateVersion },
    mounted () {
      // ipcRenderer.on('jumpNotifyCenter', () => {
      //   this.$router.push('/notify')
      // })
    },
    methods: {
      open (link) {
        shell.openExternal(link)
      },
      notice () {
        let obj = {}
        obj.title = '提示'
        obj.message = '一条消息'
        ipcRenderer.send('electron-notifications-lit-notify', obj)
      },
      toNotifyCenter () {
        this.$router.push('/notify')
      },
      openOrCloseSuspension () {
        if (this.active) {
          this.active = false
          ipcRenderer.send('hideSuspensionWindow')
        } else {
          this.active = true
          ipcRenderer.send('showSuspensionWindow')
        }
      },
      dbInsert () {
        let doc = {
          id: 1,
          name: 'perillaroc'
        }
        ipcRenderer.send('insertNeDB', doc)
      },
      dbFind () {
        let doc = {
          id: 1
        }
        ipcRenderer.send('findNeDB', doc)
      },
      doExtraOpen () {
        let path = 'E:/app_v2/splashActivity/build/outputs/apk'
        ipcRenderer.send('openExtraFile', path)
      },
      formto () {
        this.$router.push('/completeTransfer')
      },
      checkUploadChunks () {
        // var uploadfile = document.getElementById('file')
        // uploadfile.click()
        // uploadfile.onchange = function (e) {
        //   var file = this.files[0]
        //   if (!file) {
        //     alert('请选择文件！')
        //     return false
        //   }
        //   getFileMD5(file, md5 => {
        //     file.md5 = md5
        //   })
        //   console.log(file.md5)
        // }
        this.$router.push('/upload')
      }
    }

  }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body { font-family: 'Source Sans Pro', sans-serif; }

  #wrapper {
    background:
      radial-gradient(
        ellipse at top left,
        rgba(255, 255, 255, 1) 40%,
        rgba(229, 229, 229, .9) 100%
      );
    height: 100vh;
    padding: 60px 80px;
    width: 100vw;
  }

  #logo {
    height: auto;
    margin-bottom: 20px;
    width: 420px;
  }

  main {
    display: flex;
    justify-content: space-between;
  }

  main > div { flex-basis: 50%; }

  .left-side {
    display: flex;
    flex-direction: column;
  }

  .welcome {
    color: #555;
    font-size: 23px;
    margin-bottom: 10px;
  }

  .title {
    color: #2c3e50;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 6px;
  }

  .title.alt {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .doc p {
    color: black;
    margin-bottom: 10px;
  }

  .doc button {
    font-size: .8em;
    cursor: pointer;
    outline: none;
    padding: 0.75em 2em;
    border-radius: 2em;
    display: inline-block;
    color: #fff;
    background-color: #4fc08d;
    transition: all 0.15s ease;
    box-sizing: border-box;
    border: 1px solid #4fc08d;
  }

  .doc button.alt {
    color: #42b983;
    background-color: transparent;
  }

   .progress{
        margin: 20px 50px 50px;
        border-radius: 1px;
        /deep/ .el-progress-bar__outer{
            border-radius: 2px;
            .el-progress-bar__inner {
                border-radius: 2px;
                background-color: #8EC5FC;
                background-image: linear-gradient(135deg,#E0C3FC 24%,#8EC5FC 75%);
                background-image: -webkit-linear-gradient(135deg,#E0C3FC 24%,#8EC5FC 75%);
            }
        }
    }
    .hidden{
        width: 200px;
        color: #fff;
        font-size: 14px;
        // height: 30px;
        // line-height: 30px;
        margin: 40px auto;
        text-align: center;
        cursor: pointer;
        border-radius: 5px;
        transition: all .5s ease-in-out;
        -webkit-transition: all .5s ease-in-out;
        background-color: #8EC5FC;
        background-image: linear-gradient(135deg,#E0C3FC 24%,#8EC5FC 75%);
        background-image: -webkit-linear-gradient(135deg,#E0C3FC 24%,#8EC5FC 75%);
        &:hover{
            background-position:200px;
        }
        span{
            margin-left: 5px;
        }
    }
</style>
